"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  BarChart3,
  TrendingUp,
  Target,
  PieChart,
  Search,
  Download,
  Eye,
  AlertTriangle,
  CheckCircle,
  Lightbulb,
  Globe,
  Users,
  DollarSign,
  Zap,
  Star,
  Filter,
  RefreshCw,
  Calendar,
  MapPin,
  Smartphone,
  ShoppingCart,
  Building,
  Heart,
  Briefcase,
} from "lucide-react"
import { useState } from "react"

interface MarketAnalyzerProps {
  onClose: () => void
}

export function MarketAnalyzer({ onClose }: MarketAnalyzerProps) {
  const [activeTab, setActiveTab] = useState("setup")
  const [analysisData, setAnalysisData] = useState({
    // 基础设置
    industry: "",
    targetMarket: "",
    productCategory: "",
    geographicScope: "",
    priceRange: "",
    businessModel: "",

    // 深度分析设置
    analysisDepth: [2], // 1=基础, 2=标准, 3=深度
    includeCompetitors: true,
    includeTrends: true,
    includeCustomerAnalysis: true,
    includePricing: true,
    includeChannels: true,

    // 自定义参数
    competitors: "",
    uniqueValue: "",
    targetAge: "",
    targetIncome: "",
    customerBehavior: "",
    marketingBudget: "",
    timeframe: "12", // 分析时间范围（月）
  })

  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [analysisResult, setAnalysisResult] = useState(null)
  const [analysisProgress, setAnalysisProgress] = useState(0)

  const industries = [
    { id: "tech", name: "互联网/科技", icon: Smartphone },
    { id: "ecommerce", name: "电子商务", icon: ShoppingCart },
    { id: "fintech", name: "金融科技", icon: DollarSign },
    { id: "education", name: "教育培训", icon: Users },
    { id: "healthcare", name: "医疗健康", icon: Heart },
    { id: "enterprise", name: "企业服务", icon: Building },
    { id: "entertainment", name: "文娱传媒", icon: Star },
    { id: "retail", name: "新零售", icon: ShoppingCart },
    { id: "manufacturing", name: "智能制造", icon: Building },
    { id: "energy", name: "新能源", icon: Zap },
    { id: "food", name: "餐饮服务", icon: Heart },
    { id: "travel", name: "旅游出行", icon: MapPin },
    { id: "realestate", name: "房地产", icon: Building },
    { id: "other", name: "其他", icon: Briefcase },
  ]

  const geographicScopes = [
    "全球市场",
    "中国市场",
    "北美市场",
    "欧洲市场",
    "亚太市场",
    "一线城市",
    "新一线城市",
    "二线城市",
    "三四线城市",
    "华北地区",
    "华东地区",
    "华南地区",
    "华中地区",
    "西南地区",
    "西北地区",
    "东北地区",
  ]

  const businessModels = [
    "B2B",
    "B2C",
    "C2C",
    "B2B2C",
    "平台模式",
    "订阅模式",
    "免费增值",
    "广告模式",
    "佣金模式",
    "直销模式",
    "代理模式",
  ]

  const handleInputChange = (field, value) => {
    setAnalysisData((prev) => ({ ...prev, [field]: value }))
  }

  const runAnalysis = async () => {
    setIsAnalyzing(true)
    setActiveTab("analysis")
    setAnalysisProgress(0)

    // 模拟分析过程
    const steps = [
      { name: "收集行业数据", duration: 1000 },
      { name: "分析竞争对手", duration: 1500 },
      { name: "研究目标客户", duration: 1200 },
      { name: "分析市场趋势", duration: 1000 },
      { name: "计算市场规模", duration: 800 },
      { name: "评估机会风险", duration: 1000 },
      { name: "生成分析报告", duration: 500 },
    ]

    let currentProgress = 0
    for (let i = 0; i < steps.length; i++) {
      await new Promise((resolve) => setTimeout(resolve, steps[i].duration))
      currentProgress = ((i + 1) / steps.length) * 100
      setAnalysisProgress(currentProgress)
    }

    // 生成模拟分析结果
    const mockResult = {
      overview: {
        marketSize: {
          tam: "2,580亿元",
          sam: "860亿元",
          som: "86亿元",
          growth: "15.2%",
          forecast2025: "3,200亿元",
        },
        attractiveness: 85, // 市场吸引力评分
        competitionLevel: "激烈",
        entryBarrier: "中等",
        profitability: "高",
      },

      marketSegmentation: [
        {
          segment: "企业级客户",
          size: "45%",
          growth: "18%",
          potential: "高",
          description: "大中型企业，注重效率和ROI",
        },
        {
          segment: "中小企业",
          size: "35%",
          growth: "22%",
          potential: "很高",
          description: "成长型企业，价格敏感但需求旺盛",
        },
        {
          segment: "个人用户",
          size: "20%",
          growth: "12%",
          potential: "中等",
          description: "个人消费者，注重体验和便利性",
        },
      ],

      customerAnalysis: {
        demographics: {
          age: "25-45岁占70%",
          income: "月收入8K-30K占60%",
          education: "本科以上占80%",
          location: "一二线城市占75%",
        },
        behavior: {
          purchaseFrequency: "每月2-3次",
          averageSpending: "1,200元",
          decisionFactors: ["价格", "品质", "服务", "品牌"],
          preferredChannels: ["线上平台", "官方网站", "线下门店"],
        },
        painPoints: ["产品选择困难，信息不对称", "价格透明度不够", "售后服务不及时", "产品质量参差不齐"],
        needs: ["高性价比产品", "便捷的购买体验", "可靠的售后保障", "个性化定制服务"],
      },

      competitiveAnalysis: {
        landscape: "市场集中度较高，前5名占据60%市场份额",
        keyPlayers: [
          {
            name: "市场领导者A",
            share: "25%",
            strength: "品牌影响力强，渠道覆盖广",
            weakness: "产品创新不足，价格偏高",
            strategy: "防御型策略，维护市场地位",
          },
          {
            name: "挑战者B",
            share: "18%",
            strength: "技术创新能力强，产品差异化",
            weakness: "品牌知名度有限，渠道建设不足",
            strategy: "进攻型策略，快速扩张",
          },
          {
            name: "跟随者C",
            share: "12%",
            strength: "成本控制优秀，价格竞争力强",
            weakness: "产品同质化严重，利润率低",
            strategy: "跟随策略，模仿创新",
          },
          {
            name: "新进入者",
            share: "5%",
            strength: "新技术应用，商业模式创新",
            weakness: "资源有限，市场认知度低",
            strategy: "差异化策略，细分市场突破",
          },
        ],
        competitiveMatrix: {
          price: { you: 7, competitor1: 6, competitor2: 8, competitor3: 9 },
          quality: { you: 8, competitor1: 9, competitor2: 7, competitor3: 6 },
          service: { you: 8, competitor1: 7, competitor2: 6, competitor3: 5 },
          innovation: { you: 9, competitor1: 6, competitor2: 8, competitor3: 4 },
        },
      },

      marketTrends: [
        {
          trend: "数字化转型加速",
          impact: "正面",
          strength: "高",
          description: "疫情推动企业数字化需求激增，预计未来3年保持30%增长",
          timeline: "短期",
          opportunities: ["SaaS服务需求增长", "远程办公工具普及", "数据分析需求提升"],
        },
        {
          trend: "用户体验至上",
          impact: "正面",
          strength: "中",
          description: "消费者对产品体验要求不断提高，愿意为优质体验付费",
          timeline: "中期",
          opportunities: ["个性化服务", "智能化产品", "无缝体验设计"],
        },
        {
          trend: "可持续发展",
          impact: "正面",
          strength: "中",
          description: "环保意识提升，绿色产品和服务受到青睐",
          timeline: "长期",
          opportunities: ["绿色技术应用", "循环经济模式", "ESG投资增长"],
        },
        {
          trend: "监管政策收紧",
          impact: "负面",
          strength: "中",
          description: "数据隐私、反垄断等监管加强，合规成本上升",
          timeline: "短期",
          challenges: ["合规成本增加", "业务模式调整", "市场准入门槛提高"],
        },
      ],

      opportunities: [
        {
          title: "下沉市场拓展",
          description: "三四线城市市场渗透率仅30%，存在巨大增长空间",
          potential: "很高",
          difficulty: "中等",
          timeframe: "12-18个月",
          investmentRequired: "中等",
          expectedROI: "150-200%",
          keyActions: ["建立本地化团队", "调整产品定价", "开发适合的营销渠道"],
        },
        {
          title: "AI技术应用",
          description: "人工智能在行业应用还不够深入，技术创新机会大",
          potential: "高",
          difficulty: "高",
          timeframe: "18-24个月",
          investmentRequired: "高",
          expectedROI: "200-300%",
          keyActions: ["技术团队建设", "AI算法研发", "数据平台搭建"],
        },
        {
          title: "生态合作伙伴",
          description: "通过战略合作扩大市场覆盖，降低获客成本",
          potential: "高",
          difficulty: "低",
          timeframe: "6-12个月",
          investmentRequired: "低",
          expectedROI: "100-150%",
          keyActions: ["识别合作伙伴", "建立合作机制", "共同市场推广"],
        },
      ],

      threats: [
        {
          title: "新技术颠覆",
          description: "区块链、Web3等新技术可能改变行业格局",
          probability: "中等",
          impact: "高",
          timeframe: "2-3年",
          mitigation: ["技术跟踪研究", "小规模试点", "战略投资布局"],
        },
        {
          title: "经济周期影响",
          description: "经济下行可能导致企业削减IT支出",
          probability: "高",
          impact: "中等",
          timeframe: "1年内",
          mitigation: ["产品价值证明", "灵活定价策略", "成本结构优化"],
        },
        {
          title: "人才竞争激烈",
          description: "技术人才稀缺，人力成本持续上升",
          probability: "高",
          impact: "中等",
          timeframe: "持续",
          mitigation: ["人才培养体系", "股权激励计划", "远程工作模式"],
        },
      ],

      pricingAnalysis: {
        currentPricing: {
          premium: "500-1000元",
          standard: "200-500元",
          basic: "50-200元",
        },
        competitorPricing: {
          leader: "高价策略，溢价30-50%",
          challenger: "中等价格，性价比导向",
          follower: "低价策略，价格战",
        },
        priceElasticity: "中等敏感度，降价10%可提升销量15%",
        recommendations: [
          "采用价值定价策略，突出产品差异化",
          "建立多层次产品线，覆盖不同价格段",
          "动态定价机制，根据市场反馈调整",
        ],
      },

      channelAnalysis: {
        effectiveness: [
          { channel: "线上直销", share: "40%", cost: "低", conversion: "8%", growth: "25%" },
          { channel: "渠道代理", share: "35%", cost: "中", conversion: "12%", growth: "15%" },
          { channel: "线下门店", share: "20%", cost: "高", conversion: "18%", growth: "5%" },
          { channel: "社交媒体", share: "5%", cost: "低", conversion: "3%", growth: "50%" },
        ],
        recommendations: [
          "加大线上直销投入，提升转化率",
          "优化渠道代理体系，提高合作效率",
          "探索新兴渠道，如直播带货、KOL合作",
        ],
      },

      swotAnalysis: {
        strengths: [
          "技术实力强，产品创新能力突出",
          "团队经验丰富，执行力强",
          "客户满意度高，口碑良好",
          "资金充足，发展潜力大",
        ],
        weaknesses: [
          "品牌知名度有限，市场认知度不高",
          "销售渠道单一，覆盖面不够",
          "运营效率有待提升",
          "国际化经验不足",
        ],
        opportunities: ["市场需求快速增长", "政策环境支持", "技术发展带来新机会", "消费升级趋势明显"],
        threats: ["竞争加剧，价格战风险", "技术更新换代快", "监管政策变化", "经济环境不确定性"],
      },

      actionPlan: {
        immediate: ["完善产品功能，提升用户体验", "加强品牌建设，提高市场认知", "优化销售流程，提高转化率"],
        shortTerm: ["拓展销售渠道，增加市场覆盖", "建立合作伙伴网络", "加强客户服务，提升满意度"],
        longTerm: ["技术创新投入，保持竞争优势", "国际市场拓展", "生态系统建设"],
      },

      kpis: [
        { metric: "市场份额", current: "2.5%", target: "5%", timeframe: "12个月" },
        { metric: "客户获取成本", current: "800元", target: "600元", timeframe: "6个月" },
        { metric: "客户生命周期价值", current: "3000元", target: "4000元", timeframe: "12个月" },
        { metric: "品牌认知度", current: "15%", target: "30%", timeframe: "18个月" },
      ],
    }

    setAnalysisResult(mockResult)
    setIsAnalyzing(false)
    setActiveTab("results")
  }

  const canAnalyze = analysisData.industry && analysisData.targetMarket && analysisData.productCategory

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-7xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <BarChart3 className="w-5 h-5" />
            <span>AI市场分析工具</span>
          </DialogTitle>
        </DialogHeader>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="setup">分析设置</TabsTrigger>
            <TabsTrigger value="analysis" disabled={!analysisResult && !isAnalyzing}>
              分析过程
            </TabsTrigger>
            <TabsTrigger value="results" disabled={!analysisResult}>
              分析结果
            </TabsTrigger>
            <TabsTrigger value="insights" disabled={!analysisResult}>
              深度洞察
            </TabsTrigger>
          </TabsList>

          <TabsContent value="setup" className="space-y-6 mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* 基础设置 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Target className="w-5 h-5" />
                    <span>基础设置</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-slate-700">所属行业 *</label>
                    <Select
                      value={analysisData.industry}
                      onValueChange={(value) => handleInputChange("industry", value)}
                    >
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="选择行业" />
                      </SelectTrigger>
                      <SelectContent>
                        {industries.map((industry) => {
                          const Icon = industry.icon
                          return (
                            <SelectItem key={industry.id} value={industry.id}>
                              <div className="flex items-center space-x-2">
                                <Icon className="w-4 h-4" />
                                <span>{industry.name}</span>
                              </div>
                            </SelectItem>
                          )
                        })}
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">产品类别 *</label>
                    <Input
                      placeholder="例如：SaaS软件、消费电子、在线教育"
                      value={analysisData.productCategory}
                      onChange={(e) => handleInputChange("productCategory", e.target.value)}
                      className="mt-1"
                    />
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">地理范围</label>
                    <Select
                      value={analysisData.geographicScope}
                      onValueChange={(value) => handleInputChange("geographicScope", value)}
                    >
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="选择地理范围" />
                      </SelectTrigger>
                      <SelectContent>
                        {geographicScopes.map((scope) => (
                          <SelectItem key={scope} value={scope}>
                            {scope}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">价格区间</label>
                    <Input
                      placeholder="例如：100-500元"
                      value={analysisData.priceRange}
                      onChange={(e) => handleInputChange("priceRange", e.target.value)}
                      className="mt-1"
                    />
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">商业模式</label>
                    <Select
                      value={analysisData.businessModel}
                      onValueChange={(value) => handleInputChange("businessModel", value)}
                    >
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="选择商业模式" />
                      </SelectTrigger>
                      <SelectContent>
                        {businessModels.map((model) => (
                          <SelectItem key={model} value={model}>
                            {model}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
              </Card>

              {/* 目标市场详情 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Users className="w-5 h-5" />
                    <span>目标市场详情</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-slate-700">目标市场描述 *</label>
                    <Textarea
                      placeholder="描述您的目标客户群体，包括人口统计、行为特征、需求特点等"
                      value={analysisData.targetMarket}
                      onChange={(e) => handleInputChange("targetMarket", e.target.value)}
                      className="mt-1 min-h-[100px]"
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-700">目标年龄段</label>
                      <Input
                        placeholder="例如：25-45岁"
                        value={analysisData.targetAge}
                        onChange={(e) => handleInputChange("targetAge", e.target.value)}
                        className="mt-1"
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-700">收入水平</label>
                      <Input
                        placeholder="例如：月收入8K-20K"
                        value={analysisData.targetIncome}
                        onChange={(e) => handleInputChange("targetIncome", e.target.value)}
                        className="mt-1"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">客户行为特征</label>
                    <Textarea
                      placeholder="描述目标客户的购买行为、使用习惯、决策因素等"
                      value={analysisData.customerBehavior}
                      onChange={(e) => handleInputChange("customerBehavior", e.target.value)}
                      className="mt-1 min-h-[80px]"
                    />
                  </div>

                  <div>
                    <label className="text-sm font-medium text-slate-700">营销预算</label>
                    <Input
                      placeholder="例如：每月10万元"
                      value={analysisData.marketingBudget}
                      onChange={(e) => handleInputChange("marketingBudget", e.target.value)}
                      className="mt-1"
                    />
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 分析配置 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Filter className="w-5 h-5" />
                  <span>分析配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <Label className="text-base font-medium">分析深度</Label>
                  <div className="mt-2">
                    <Slider
                      value={analysisData.analysisDepth}
                      onValueChange={(value) => handleInputChange("analysisDepth", value)}
                      max={3}
                      min={1}
                      step={1}
                      className="w-full"
                    />
                    <div className="flex justify-between text-sm text-slate-600 mt-1">
                      <span>基础分析</span>
                      <span>标准分析</span>
                      <span>深度分析</span>
                    </div>
                  </div>
                  <p className="text-sm text-slate-600 mt-2">
                    {analysisData.analysisDepth[0] === 1 && "基础分析：市场规模、竞争格局、基本趋势"}
                    {analysisData.analysisDepth[0] === 2 && "标准分析：包含客户分析、渠道分析、定价分析"}
                    {analysisData.analysisDepth[0] === 3 && "深度分析：全面分析，包含预测模型、风险评估、行动计划"}
                  </p>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">竞争对手分析</Label>
                    <Switch
                      checked={analysisData.includeCompetitors}
                      onCheckedChange={(checked) => handleInputChange("includeCompetitors", checked)}
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">市场趋势分析</Label>
                    <Switch
                      checked={analysisData.includeTrends}
                      onCheckedChange={(checked) => handleInputChange("includeTrends", checked)}
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">客户深度分析</Label>
                    <Switch
                      checked={analysisData.includeCustomerAnalysis}
                      onCheckedChange={(checked) => handleInputChange("includeCustomerAnalysis", checked)}
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">定价策略分析</Label>
                    <Switch
                      checked={analysisData.includePricing}
                      onCheckedChange={(checked) => handleInputChange("includePricing", checked)}
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">渠道效果分析</Label>
                    <Switch
                      checked={analysisData.includeChannels}
                      onCheckedChange={(checked) => handleInputChange("includeChannels", checked)}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="text-sm font-medium text-slate-700">主要竞争对手</label>
                    <Textarea
                      placeholder="列出3-5个主要竞争对手"
                      value={analysisData.competitors}
                      onChange={(e) => handleInputChange("competitors", e.target.value)}
                      className="mt-1 min-h-[80px]"
                    />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-slate-700">独特价值主张</label>
                    <Textarea
                      placeholder="您相对于竞争对手的独特优势"
                      value={analysisData.uniqueValue}
                      onChange={(e) => handleInputChange("uniqueValue", e.target.value)}
                      className="mt-1 min-h-[80px]"
                    />
                  </div>
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">分析时间范围</label>
                  <Select
                    value={analysisData.timeframe}
                    onValueChange={(value) => handleInputChange("timeframe", value)}
                  >
                    <SelectTrigger className="mt-1 w-48">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="6">6个月</SelectItem>
                      <SelectItem value="12">12个月</SelectItem>
                      <SelectItem value="24">24个月</SelectItem>
                      <SelectItem value="36">36个月</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>

            <div className="flex justify-center">
              <Button onClick={runAnalysis} disabled={!canAnalyze} className="px-8">
                <Search className="w-4 h-4 mr-2" />
                开始深度分析
              </Button>
            </div>
          </TabsContent>

          <TabsContent value="analysis" className="space-y-6 mt-6">
            {isAnalyzing ? (
              <div className="text-center py-12">
                <BarChart3 className="w-12 h-12 text-blue-600 mx-auto mb-4 animate-pulse" />
                <h3 className="text-lg font-semibold text-slate-900 mb-2">AI正在深度分析市场数据</h3>
                <p className="text-slate-600 mb-4">正在分析行业趋势、竞争格局、客户行为、市场机会...</p>
                <Progress value={analysisProgress} className="w-80 mx-auto mb-4" />
                <div className="space-y-2 text-sm text-slate-500">
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 14 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 14 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full animate-spin" />
                    )}
                    <span>收集行业数据</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 35 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 35 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>分析竞争对手</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 52 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 52 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>研究目标客户</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 67 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 67 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>分析市场趋势</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 79 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 79 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>计算市场规模</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress > 93 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress > 93 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>评估机会风险</span>
                  </div>
                  <div
                    className={`flex items-center justify-center space-x-2 ${analysisProgress === 100 ? "text-green-600" : ""}`}
                  >
                    {analysisProgress === 100 ? (
                      <CheckCircle className="w-4 h-4" />
                    ) : (
                      <div className="w-4 h-4 border-2 border-slate-300 rounded-full" />
                    )}
                    <span>生成分析报告</span>
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-12">
                <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-slate-900 mb-2">深度分析完成！</h3>
                <p className="text-slate-600 mb-4">市场分析报告已生成，包含详细的洞察和建议</p>
                <Button onClick={() => setActiveTab("results")}>查看分析结果</Button>
              </div>
            )}
          </TabsContent>

          <TabsContent value="results" className="space-y-6 mt-6">
            {analysisResult && (
              <div className="space-y-6">
                {/* 操作按钮 */}
                <div className="flex justify-between items-center">
                  <h2 className="text-xl font-semibold text-slate-900">市场分析报告</h2>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <RefreshCw className="w-4 h-4 mr-2" />
                      重新分析
                    </Button>
                    <Button variant="outline" size="sm">
                      <Eye className="w-4 h-4 mr-2" />
                      预览报告
                    </Button>
                    <Button variant="outline" size="sm">
                      <Download className="w-4 h-4 mr-2" />
                      下载PDF
                    </Button>
                  </div>
                </div>

                {/* 市场概览 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Globe className="w-5 h-5 text-blue-600" />
                      <span>市场概览</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                      <div className="text-center p-4 bg-blue-50 rounded-lg">
                        <div className="text-2xl font-bold text-blue-600">{analysisResult.overview.marketSize.tam}</div>
                        <div className="text-sm text-slate-600">总体市场(TAM)</div>
                      </div>
                      <div className="text-center p-4 bg-green-50 rounded-lg">
                        <div className="text-2xl font-bold text-green-600">
                          {analysisResult.overview.marketSize.sam}
                        </div>
                        <div className="text-sm text-slate-600">可服务市场(SAM)</div>
                      </div>
                      <div className="text-center p-4 bg-purple-50 rounded-lg">
                        <div className="text-2xl font-bold text-purple-600">
                          {analysisResult.overview.marketSize.som}
                        </div>
                        <div className="text-sm text-slate-600">可获得市场(SOM)</div>
                      </div>
                      <div className="text-center p-4 bg-orange-50 rounded-lg">
                        <div className="text-2xl font-bold text-orange-600">
                          {analysisResult.overview.marketSize.growth}
                        </div>
                        <div className="text-sm text-slate-600">年增长率</div>
                      </div>
                      <div className="text-center p-4 bg-red-50 rounded-lg">
                        <div className="text-2xl font-bold text-red-600">{analysisResult.overview.attractiveness}</div>
                        <div className="text-sm text-slate-600">市场吸引力</div>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="p-4 border border-slate-200 rounded-lg">
                        <h4 className="font-medium text-slate-900 mb-2">竞争程度</h4>
                        <Badge
                          variant={analysisResult.overview.competitionLevel === "激烈" ? "destructive" : "default"}
                        >
                          {analysisResult.overview.competitionLevel}
                        </Badge>
                      </div>
                      <div className="p-4 border border-slate-200 rounded-lg">
                        <h4 className="font-medium text-slate-900 mb-2">进入壁垒</h4>
                        <Badge variant="outline">{analysisResult.overview.entryBarrier}</Badge>
                      </div>
                      <div className="p-4 border border-slate-200 rounded-lg">
                        <h4 className="font-medium text-slate-900 mb-2">盈利能力</h4>
                        <Badge variant="default">{analysisResult.overview.profitability}</Badge>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                {/* 市场细分 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <PieChart className="w-5 h-5 text-green-600" />
                      <span>市场细分分析</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {analysisResult.marketSegmentation.map((segment, index) => (
                        <div key={index} className="p-4 border border-slate-200 rounded-lg">
                          <div className="flex items-center justify-between mb-2">
                            <h4 className="font-medium text-slate-900">{segment.segment}</h4>
                            <div className="flex items-center space-x-2">
                              <Badge variant="outline">市场份额: {segment.size}</Badge>
                              <Badge variant="outline">增长率: {segment.growth}</Badge>
                              <Badge
                                variant={
                                  segment.potential === "很高"
                                    ? "default"
                                    : segment.potential === "高"
                                      ? "secondary"
                                      : "outline"
                                }
                              >
                                潜力: {segment.potential}
                              </Badge>
                            </div>
                          </div>
                          <p className="text-sm text-slate-600">{segment.description}</p>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* 客户分析 */}
                {analysisData.includeCustomerAnalysis && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <Users className="w-5 h-5 text-purple-600" />
                        <span>客户深度分析</span>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Tabs defaultValue="demographics" className="w-full">
                        <TabsList className="grid w-full grid-cols-3">
                          <TabsTrigger value="demographics">人口统计</TabsTrigger>
                          <TabsTrigger value="behavior">行为特征</TabsTrigger>
                          <TabsTrigger value="needs">需求痛点</TabsTrigger>
                        </TabsList>

                        <TabsContent value="demographics" className="mt-4">
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div className="p-3 bg-slate-50 rounded-lg">
                              <div className="text-sm text-slate-600">年龄分布</div>
                              <div className="font-medium">{analysisResult.customerAnalysis.demographics.age}</div>
                            </div>
                            <div className="p-3 bg-slate-50 rounded-lg">
                              <div className="text-sm text-slate-600">收入水平</div>
                              <div className="font-medium">{analysisResult.customerAnalysis.demographics.income}</div>
                            </div>
                            <div className="p-3 bg-slate-50 rounded-lg">
                              <div className="text-sm text-slate-600">教育程度</div>
                              <div className="font-medium">
                                {analysisResult.customerAnalysis.demographics.education}
                              </div>
                            </div>
                            <div className="p-3 bg-slate-50 rounded-lg">
                              <div className="text-sm text-slate-600">地理分布</div>
                              <div className="font-medium">{analysisResult.customerAnalysis.demographics.location}</div>
                            </div>
                          </div>
                        </TabsContent>

                        <TabsContent value="behavior" className="mt-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                              <h4 className="font-medium text-slate-900 mb-3">购买行为</h4>
                              <div className="space-y-2 text-sm">
                                <div className="flex justify-between">
                                  <span className="text-slate-600">购买频率:</span>
                                  <span className="font-medium">
                                    {analysisResult.customerAnalysis.behavior.purchaseFrequency}
                                  </span>
                                </div>
                                <div className="flex justify-between">
                                  <span className="text-slate-600">平均消费:</span>
                                  <span className="font-medium">
                                    {analysisResult.customerAnalysis.behavior.averageSpending}
                                  </span>
                                </div>
                              </div>
                            </div>
                            <div>
                              <h4 className="font-medium text-slate-900 mb-3">决策因素</h4>
                              <div className="flex flex-wrap gap-2">
                                {analysisResult.customerAnalysis.behavior.decisionFactors.map((factor, index) => (
                                  <Badge key={index} variant="outline">
                                    {factor}
                                  </Badge>
                                ))}
                              </div>
                            </div>
                          </div>
                        </TabsContent>

                        <TabsContent value="needs" className="mt-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                              <h4 className="font-medium text-slate-900 mb-3">主要痛点</h4>
                              <ul className="space-y-2">
                                {analysisResult.customerAnalysis.painPoints.map((pain, index) => (
                                  <li key={index} className="flex items-start space-x-2">
                                    <AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
                                    <span className="text-sm text-slate-700">{pain}</span>
                                  </li>
                                ))}
                              </ul>
                            </div>
                            <div>
                              <h4 className="font-medium text-slate-900 mb-3">核心需求</h4>
                              <ul className="space-y-2">
                                {analysisResult.customerAnalysis.needs.map((need, index) => (
                                  <li key={index} className="flex items-start space-x-2">
                                    <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                                    <span className="text-sm text-slate-700">{need}</span>
                                  </li>
                                ))}
                              </ul>
                            </div>
                          </div>
                        </TabsContent>
                      </Tabs>
                    </CardContent>
                  </Card>
                )}

                {/* 竞争分析 */}
                {analysisData.includeCompetitors && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <Target className="w-5 h-5 text-red-600" />
                        <span>竞争格局分析</span>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="mb-6">
                        <p className="text-sm text-slate-600 mb-4">{analysisResult.competitiveAnalysis.landscape}</p>
                        <div className="space-y-4">
                          {analysisResult.competitiveAnalysis.keyPlayers.map((player, index) => (
                            <div key={index} className="p-4 border border-slate-200 rounded-lg">
                              <div className="flex items-center justify-between mb-2">
                                <h4 className="font-medium text-slate-900">{player.name}</h4>
                                <Badge variant="outline">市场份额: {player.share}</Badge>
                              </div>
                              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                                <div>
                                  <span className="text-green-600 font-medium">优势: </span>
                                  <span className="text-slate-700">{player.strength}</span>
                                </div>
                                <div>
                                  <span className="text-red-600 font-medium">劣势: </span>
                                  <span className="text-slate-700">{player.weakness}</span>
                                </div>
                                <div>
                                  <span className="text-blue-600 font-medium">策略: </span>
                                  <span className="text-slate-700">{player.strategy}</span>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 竞争力对比矩阵 */}
                      <div>
                        <h4 className="font-medium text-slate-900 mb-4">竞争力对比矩阵</h4>
                        <div className="overflow-x-auto">
                          <table className="w-full text-sm">
                            <thead>
                              <tr className="border-b">
                                <th className="text-left py-2">维度</th>
                                <th className="text-center py-2">您的产品</th>
                                <th className="text-center py-2">竞争对手1</th>
                                <th className="text-center py-2">竞争对手2</th>
                                <th className="text-center py-2">竞争对手3</th>
                              </tr>
                            </thead>
                            <tbody>
                              {Object.entries(analysisResult.competitiveAnalysis.competitiveMatrix).map(
                                ([dimension, scores]) => (
                                  <tr key={dimension} className="border-b">
                                    <td className="py-2 font-medium capitalize">
                                      {dimension === "price"
                                        ? "价格"
                                        : dimension === "quality"
                                          ? "质量"
                                          : dimension === "service"
                                            ? "服务"
                                            : "创新"}
                                    </td>
                                    <td className="text-center py-2">
                                      <div className="flex items-center justify-center">
                                        <div className="flex space-x-1">
                                          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                                            <div
                                              key={i}
                                              className={`w-2 h-2 rounded-full ${i <= scores.you ? "bg-blue-500" : "bg-slate-200"}`}
                                            />
                                          ))}
                                        </div>
                                        <span className="ml-2 text-xs">{scores.you}/10</span>
                                      </div>
                                    </td>
                                    <td className="text-center py-2">
                                      <div className="flex items-center justify-center">
                                        <div className="flex space-x-1">
                                          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                                            <div
                                              key={i}
                                              className={`w-2 h-2 rounded-full ${i <= scores.competitor1 ? "bg-red-500" : "bg-slate-200"}`}
                                            />
                                          ))}
                                        </div>
                                        <span className="ml-2 text-xs">{scores.competitor1}/10</span>
                                      </div>
                                    </td>
                                    <td className="text-center py-2">
                                      <div className="flex items-center justify-center">
                                        <div className="flex space-x-1">
                                          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                                            <div
                                              key={i}
                                              className={`w-2 h-2 rounded-full ${i <= scores.competitor2 ? "bg-yellow-500" : "bg-slate-200"}`}
                                            />
                                          ))}
                                        </div>
                                        <span className="ml-2 text-xs">{scores.competitor2}/10</span>
                                      </div>
                                    </td>
                                    <td className="text-center py-2">
                                      <div className="flex items-center justify-center">
                                        <div className="flex space-x-1">
                                          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
                                            <div
                                              key={i}
                                              className={`w-2 h-2 rounded-full ${i <= scores.competitor3 ? "bg-green-500" : "bg-slate-200"}`}
                                            />
                                          ))}
                                        </div>
                                        <span className="ml-2 text-xs">{scores.competitor3}/10</span>
                                      </div>
                                    </td>
                                  </tr>
                                ),
                              )}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )}

                {/* 市场趋势 */}
                {analysisData.includeTrends && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <TrendingUp className="w-5 h-5 text-orange-600" />
                        <span>市场趋势分析</span>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {analysisResult.marketTrends.map((trend, index) => (
                          <div
                            key={index}
                            className={`p-4 rounded-lg border ${
                              trend.impact === "正面" ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"
                            }`}
                          >
                            <div className="flex items-start justify-between mb-2">
                              <h4 className="font-medium text-slate-900">{trend.trend}</h4>
                              <div className="flex space-x-2">
                                <Badge
                                  variant={trend.impact === "正面" ? "default" : "destructive"}
                                  className="text-xs"
                                >
                                  {trend.impact}影响
                                </Badge>
                                <Badge variant="outline" className="text-xs">
                                  {trend.strength}强度
                                </Badge>
                                <Badge variant="secondary" className="text-xs">
                                  {trend.timeline}
                                </Badge>
                              </div>
                            </div>
                            <p className="text-sm text-slate-700 mb-3">{trend.description}</p>
                            {trend.opportunities && (
                              <div>
                                <h5 className="text-sm font-medium text-green-700 mb-1">机会点:</h5>
                                <div className="flex flex-wrap gap-1">
                                  {trend.opportunities.map((opp, i) => (
                                    <Badge key={i} variant="outline" className="text-xs text-green-700">
                                      {opp}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )}
                            {trend.challenges && (
                              <div>
                                <h5 className="text-sm font-medium text-red-700 mb-1">挑战:</h5>
                                <div className="flex flex-wrap gap-1">
                                  {trend.challenges.map((challenge, i) => (
                                    <Badge key={i} variant="outline" className="text-xs text-red-700">
                                      {challenge}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            )}
          </TabsContent>

          <TabsContent value="insights" className="space-y-6 mt-6">
            {analysisResult && (
              <div className="space-y-6">
                {/* 机会分析 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Lightbulb className="w-5 h-5 text-yellow-600" />
                      <span>市场机会分析</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {analysisResult.opportunities.map((opportunity, index) => (
                        <div key={index} className="p-4 border border-slate-200 rounded-lg">
                          <div className="flex items-start justify-between mb-3">
                            <h4 className="font-medium text-slate-900">{opportunity.title}</h4>
                            <div className="flex space-x-2">
                              <Badge
                                variant={
                                  opportunity.potential === "很高"
                                    ? "default"
                                    : opportunity.potential === "高"
                                      ? "secondary"
                                      : "outline"
                                }
                              >
                                {opportunity.potential}潜力
                              </Badge>
                              <Badge variant="outline">{opportunity.difficulty}难度</Badge>
                            </div>
                          </div>
                          <p className="text-sm text-slate-700 mb-3">{opportunity.description}</p>
                          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                            <div>
                              <span className="text-slate-600">时间框架:</span>
                              <div className="font-medium">{opportunity.timeframe}</div>
                            </div>
                            <div>
                              <span className="text-slate-600">投资需求:</span>
                              <div className="font-medium">{opportunity.investmentRequired}</div>
                            </div>
                            <div>
                              <span className="text-slate-600">预期ROI:</span>
                              <div className="font-medium text-green-600">{opportunity.expectedROI}</div>
                            </div>
                            <div>
                              <span className="text-slate-600">关键行动:</span>
                              <div className="text-xs mt-1">
                                {opportunity.keyActions.slice(0, 2).map((action, i) => (
                                  <div key={i} className="text-slate-600">
                                    • {action}
                                  </div>
                                ))}
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* 威胁分析 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <AlertTriangle className="w-5 h-5 text-red-600" />
                      <span>市场威胁分析</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {analysisResult.threats.map((threat, index) => (
                        <div key={index} className="p-4 border border-red-200 bg-red-50 rounded-lg">
                          <div className="flex items-start justify-between mb-3">
                            <h4 className="font-medium text-slate-900">{threat.title}</h4>
                            <div className="flex space-x-2">
                              <Badge variant={threat.probability === "高" ? "destructive" : "outline"}>
                                {threat.probability}概率
                              </Badge>
                              <Badge variant={threat.impact === "高" ? "destructive" : "secondary"}>
                                {threat.impact}影响
                              </Badge>
                            </div>
                          </div>
                          <p className="text-sm text-slate-700 mb-3">{threat.description}</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                            <div>
                              <span className="text-slate-600">时间框架:</span>
                              <div className="font-medium">{threat.timeframe}</div>
                            </div>
                            <div>
                              <span className="text-slate-600">缓解措施:</span>
                              <div className="text-xs mt-1">
                                {threat.mitigation.map((action, i) => (
                                  <div key={i} className="text-slate-600">
                                    • {action}
                                  </div>
                                ))}
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* SWOT分析 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <BarChart3 className="w-5 h-5 text-blue-600" />
                      <span>SWOT综合分析</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="p-4 border border-green-200 bg-green-50 rounded-lg">
                        <h4 className="font-medium text-green-800 mb-3 flex items-center">
                          <CheckCircle className="w-4 h-4 mr-2" />
                          优势 (Strengths)
                        </h4>
                        <ul className="space-y-1 text-sm">
                          {analysisResult.swotAnalysis.strengths.map((item, index) => (
                            <li key={index} className="text-green-700">
                              • {item}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="p-4 border border-red-200 bg-red-50 rounded-lg">
                        <h4 className="font-medium text-red-800 mb-3 flex items-center">
                          <AlertTriangle className="w-4 h-4 mr-2" />
                          劣势 (Weaknesses)
                        </h4>
                        <ul className="space-y-1 text-sm">
                          {analysisResult.swotAnalysis.weaknesses.map((item, index) => (
                            <li key={index} className="text-red-700">
                              • {item}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="p-4 border border-blue-200 bg-blue-50 rounded-lg">
                        <h4 className="font-medium text-blue-800 mb-3 flex items-center">
                          <TrendingUp className="w-4 h-4 mr-2" />
                          机会 (Opportunities)
                        </h4>
                        <ul className="space-y-1 text-sm">
                          {analysisResult.swotAnalysis.opportunities.map((item, index) => (
                            <li key={index} className="text-blue-700">
                              • {item}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="p-4 border border-yellow-200 bg-yellow-50 rounded-lg">
                        <h4 className="font-medium text-yellow-800 mb-3 flex items-center">
                          <AlertTriangle className="w-4 h-4 mr-2" />
                          威胁 (Threats)
                        </h4>
                        <ul className="space-y-1 text-sm">
                          {analysisResult.swotAnalysis.threats.map((item, index) => (
                            <li key={index} className="text-yellow-700">
                              • {item}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                {/* 行动计划 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Calendar className="w-5 h-5 text-purple-600" />
                      <span>行动计划建议</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <Tabs defaultValue="immediate" className="w-full">
                      <TabsList className="grid w-full grid-cols-3">
                        <TabsTrigger value="immediate">立即行动</TabsTrigger>
                        <TabsTrigger value="shortTerm">短期计划</TabsTrigger>
                        <TabsTrigger value="longTerm">长期规划</TabsTrigger>
                      </TabsList>

                      <TabsContent value="immediate" className="mt-4">
                        <ul className="space-y-2">
                          {analysisResult.actionPlan.immediate.map((action, index) => (
                            <li key={index} className="flex items-start space-x-2">
                              <Zap className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
                              <span className="text-sm text-slate-700">{action}</span>
                            </li>
                          ))}
                        </ul>
                      </TabsContent>

                      <TabsContent value="shortTerm" className="mt-4">
                        <ul className="space-y-2">
                          {analysisResult.actionPlan.shortTerm.map((action, index) => (
                            <li key={index} className="flex items-start space-x-2">
                              <Target className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
                              <span className="text-sm text-slate-700">{action}</span>
                            </li>
                          ))}
                        </ul>
                      </TabsContent>

                      <TabsContent value="longTerm" className="mt-4">
                        <ul className="space-y-2">
                          {analysisResult.actionPlan.longTerm.map((action, index) => (
                            <li key={index} className="flex items-start space-x-2">
                              <Star className="w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0" />
                              <span className="text-sm text-slate-700">{action}</span>
                            </li>
                          ))}
                        </ul>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                </Card>

                {/* 关键指标 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <BarChart3 className="w-5 h-5 text-green-600" />
                      <span>关键绩效指标(KPIs)</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {analysisResult.kpis.map((kpi, index) => (
                        <div key={index} className="p-4 border border-slate-200 rounded-lg">
                          <div className="flex items-center justify-between mb-2">
                            <h4 className="font-medium text-slate-900">{kpi.metric}</h4>
                            <Badge variant="outline">{kpi.timeframe}</Badge>
                          </div>
                          <div className="flex items-center space-x-4">
                            <div className="text-center">
                              <div className="text-sm text-slate-600">当前</div>
                              <div className="text-lg font-semibold text-slate-900">{kpi.current}</div>
                            </div>
                            <div className="text-slate-400">→</div>
                            <div className="text-center">
                              <div className="text-sm text-slate-600">目标</div>
                              <div className="text-lg font-semibold text-green-600">{kpi.target}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}
          </TabsContent>
        </Tabs>

        <div className="flex justify-end mt-6">
          <Button variant="outline" onClick={onClose}>
            关闭
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
